<template>
  <div class="g-container">
    <div class="other">
      <p class="main_text">平台用户</p>
    </div>
    <!-- 搜索 -->
    <div class="g-search">
      <!-- 信息区域 -->
      <div class="all_select" style="margin-top: 0">
        <!-- 订单编号 -->
        <div class="input_valye">
          <span class="demonstration">用户名称</span>
          <input type="text" class="input" placeholder="请输入订单编号" v-model="searchValue.orderSn" />
        </div>
        <!-- 订单状态 -->
        <div class="input_valye">
          <span class="demonstration">用户等级</span
          ><el-select v-model="searchValue.status" class="m-2" placeholder="请选择订单状态">
            <el-option v-for="item in status_options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <!-- 订单状态 -->
        <div class="input_valye">
          <span class="demonstration">用户状态</span
          ><el-select v-model="searchValue.status" class="m-2" placeholder="请选择订单状态">
            <el-option v-for="item in status_options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <!-- 底部按钮区域 -->
      <div class="bottom_btn">
        <el-button class="solid" @click="search">查询</el-button>
        <el-button class="hollow" @click="reset">重置</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table">
      <!-- 表格按钮区域 -->
      <div class="table_function">
        <el-button class="solid" @click="massTexting">推送信息</el-button>
        <!-- <el-button class="hollow">群发信息</el-button> -->
        <el-button class="forbidden">批量删除</el-button>
      </div>

      <!-- 表格区域 -->
      <el-table
        :data="tableData"
        height="300px"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :header-cell-style="{'text-align': 'center'}"
        :show-overflow-tooltip="true">
        <el-table-column type="selection" width="40" />
        <el-table-column prop="username" label="用户名" align="center" />
        <el-table-column prop="vipRate" label="会员等级" align="center">
          <template #default="item">
            <el-text v-if="item.row.vipRate == 0" class="mx-1" type="success">青铜</el-text>
            <el-text v-if="item.row.vipRate == 1" class="mx-1" type="default">白银</el-text>
            <el-text v-if="item.row.vipRate == 2" class="mx-1" type="warning">黄金</el-text>
            <el-text v-if="item.row.vipRate == 3" class="mx-1" type="primary">钻石</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="cost" label="消费金额" align="center" />
        <el-table-column prop="status" label="用户状态" align="center">
          <template #default="item">
            <el-text v-if="item.row.vipRate == 0" class="mx-1" type="success">活跃</el-text>
            <el-text v-if="item.row.vipRate == 1" class="mx-1" type="primary">不活跃</el-text>
            <el-text v-if="item.row.vipRate == 2" class="mx-1" type="warning">注销</el-text>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" class="operation">
          <template #default="item">
            <div class="table_btn">
              <el-button size="small" class="none" @click="look(item.row)">查看</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <smartPager
        v-model:current-page="searchValue.page"
        v-model:page-size="searchValue.rows"
        :total="total"
        @change="pageChange" />
    </div>
    <!-- 抽屉 -->
    <el-drawer v-model="drawer">
      <!-- 店铺头像，名字 -->
      <div class="shop_head">
        <div class="shop">
          <img :src="GoodsformDate.headImg" class="shop_logo" />
          <div class="name">
            店铺名称
            <p class="shop_id">店铺ID:{{ GoodsformDate.directorPhone }}</p>
          </div>
        </div>
        <div></div>
      </div>
      <!-- 导航 -->
      <div class="nav1">
        <li class="nav_li current" @click="navLi(0)" id="nav_li1">店铺平台信息</li>
        <li class="nav_li" @click="navLi(1)" id="nav_li2">主体资质信息</li>
      </div>
      <!-- 店铺平台信息 -->
      <div class="platform" v-show="platform">
        <div class="area">
          <div class="title">店铺名称</div>
          <div class="mes">123</div>
        </div>
        <div class="area">
          <div class="title">店铺ID</div>
          <div class="mes">123</div>
        </div>
        <div class="title_m_b">
          <div class="box"></div>
          &nbsp; 账户资产
        </div>
        <el-table
          :data="tableData1"
          style="width: 100%"
          border
          :show-overflow-tooltip="true"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }">
          <el-table-column prop="date" label="积分" width="180" />
          <el-table-column prop="name" label="累计优惠券数" width="180" />
          <el-table-column prop="address" label="已用优惠券" />
          <el-table-column prop="address" label="过期优惠券" />
          <el-table-column prop="address" label="未用优惠券" />
        </el-table>
        <div class="btn_center">
          <el-button @click="addGoodsCancel" class="hollow">取消</el-button>
          <el-button class="solid" @click="addGoodsBtn()">确定</el-button>
        </div>
      </div>
      <!-- 主体资质信息 -->
      <div class="principal" v-show="principal">
        <div class="title_m_b">
          <div class="box"></div>
          &nbsp; 账户明细
        </div>
        <el-table
          :data="tableData2"
          style="width: 100%"
          border
          :show-overflow-tooltip="true"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }">
          <el-table-column prop="date" label="积分" width="180" />
          <el-table-column prop="name" label="累计优惠券数" width="180" />
          <el-table-column prop="address" label="已用优惠券" />
          <el-table-column prop="address" label="过期优惠券" />
          <el-table-column prop="address" label="未用优惠券" />
        </el-table>
        <div class="btn_center">
          <el-button @click="addGoodsCancel" class="hollow">取消</el-button>
          <el-button class="solid" @click="addGoodsBtn()">确定</el-button>
        </div>
      </div>
    </el-drawer>
    <!-- 群发信息 -->
    <div class="messages" v-if="messagesShow">
      <div class="title1">
        <div class="title_mes">
          <el-icon size="20" color="#fff"><Edit /></el-icon>&nbsp;群发消息
        </div>
        <span class="close" @click="maskBtn1">✖</span>
      </div>
      <div class="content1" style="margin-top: 40px">
        <el-form ref="ruleFormRef" :model="GoodsformDate" label-width="90px" label-position="right" :rules="rules">
          <el-form-item label="推送类型:" prop="type">
            <el-select v-model="GoodsformDate.type" class="m-2" placeholder="请选择消息模板" @change="typeChange">
              <el-option v-for="item in type_options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <span id="input_hint"></span>
          </el-form-item>
          <el-form-item label="消息模板:" prop="type">
            <el-select v-model="GoodsformDate.templateId" class="m-2" placeholder="请选择消息模板">
              <el-option v-for="item in template_options" :key="item.title" :label="item.title" :value="item.id">
              </el-option>
            </el-select>
            <span id="input_hint"></span>
          </el-form-item>
          <el-form-item label="短信内容:" prop="type">
            <el-input
              v-model="GoodsformDate.content"
              cols="30"
              rows="4"
              class="form_input"
              maxlength="300"
              type="textarea"
              show-word-limit></el-input>
            <span id="input_hint"></span>
          </el-form-item>
        </el-form>
        <div style="display: flex; align-items: center; font-size: 14px; color: #3d3d3d">
          <el-icon color="#116CF8" size="18"><Warning /></el-icon>&nbsp;发送时系统会自动在结尾追加平台名称，请勿重复添加
        </div>
        <div class="btn">
          <el-button class="hollow" @click="CancelPopUpBox">取消</el-button>
          <el-button class="solid" @click="plateformSure" :loading="loading">确定</el-button>
        </div>
      </div>
    </div>
    <!-- 遮罩层 -->
    <div id="mask1" v-if="mask" @click="maskBtn1"></div>
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted, reactive} from 'vue';
import {RequestShopUser, RequesttemplateIds, SendMesToUser} from '@/api/path/index.js';
import {Warning, Edit} from '@element-plus/icons-vue';

import moment from 'moment';
import {ElMessage} from 'element-plus';
// 推送消息数据
const GoodsformDate = ref({
  templateId: '',
  type: '',
  content: '',
});
// 表单规则
const rules = reactive({
  type: [{required: true, message: '请输入文章标题', trigger: 'blur'}],
  // unit: [{ required: true, message: '请选择商品单位', trigger: 'change' }],
  link: [{required: true, message: '请选择商品分类', trigger: 'change'}],
});
const tableData = ref<any>([]); // 表格列表
const total = ref(0); //表格总数
const deliverShow = ref(false); //控制发货显示
const mask = ref(false); //控制遮罩层显示
const plateformShow = ref(false); //控制推送信息显示
const messagesShow = ref(false); //控制群发显示
const radio = ref('');
const drawer = ref(false); //控制弹出层显示
const platform = ref(false); //控制弹出层显示
const principal = ref(true); //控制弹出层显示
const shopId = Number(localStorage.getItem('ShopId'));
interface RestaurantItem {
  value: string;
  link: string;
}
const status_list = ref<any>([]); //暂时存储状态
const ids = ref<any>([]);
/**
 * 表格复选框选中事件
 */
const handleSelectionChange = (selection: any) => {
  ids.value = [];
  for (let i = 0; i < selection.length; i++) {
    ids.value.push(selection[i].id);
  }
};
/************************************  群发消息  ************************************/
const massTexting = () => {
  if (ids.value.length == 0) {
    ElMessage.error('请选择接收消息的对象');
  } else {
    mask.value = true;
    messagesShow.value = true;
  }
};

/**
 * 根据推送类型获取模板
 */
const template_options = ref<any>([]);
const typeChange = async () => {
  const a = await RequesttemplateIds(GoodsformDate.value.type);
  template_options.value = a.resultObj;
};

/**
 * 推送类型
 */
const type_options = [
  {
    value: 0,
    label: '支付通知',
  },
  {
    value: 1,
    label: '物流通知',
  },
  {
    value: 2,
    label: '平台公告',
  },
  {
    value: 3,
    label: '优惠促销',
  },
];

/**
 * 群发消息确认
 */

let loading = ref(false); //设置记录时间，用于防抖
let timer = ref(null); //设置记录时间，用于防抖
const plateformSure = async () => {
  if (timer != null) {
    clearTimeout(timer);
  }
  timer = setTimeout(async () => {
    loading.value = true;
    const a = await new Promise((resolve, reject) => {
      SendMesToUser({
        ids: ids.value,
        templateId: GoodsformDate.value.templateId,
        content: GoodsformDate.value.content,
        type: GoodsformDate.value.type,
      })
        .then((res: any) => {
          resolve(res);
          messagesShow.value = false;
          mask.value = false;
          loading.value = false;
        })
        .catch((err: any) => {
          reject(err);
          loading.value = false;
        });
    });
  }, 500);
};
/************************************  弹出框关闭  ************************************/
const CancelPopUpBox = () => {
  mask.value = false;
  messagesShow.value = false;
  GoodsformDate.value = {
    templateId: '',
    type: '',
    content: '',
  };
};

/**
 * 分页
 */
const pageChange = async (val: number) => {
  requestShopUser();
};
// 挂载
onMounted(() => {
  requestShopUser();
});
/**
 * 获取订单信息
 */
const requestShopUser = async () => {
  const a = await RequestShopUser(searchValue.value);
  status_list.value = '';
  tableData.value = a.resultObj.users;
  total.value = a.resultObj.count;
  console.log(total.value);
};
// 搜索参数
const searchValue = ref({
  shopId: shopId,
  orderSn: '',
  status: '',
  startAt: '',
  endAt: '',
  page: 1,
  rows: 10,
});
/**
 * 状态选择器
 */
const status_options = [
  {
    value: 0,
    label: '待支付',
  },
  {
    value: 1,
    label: '待发货',
  },
  {
    value: 2,
    label: '待收货',
  },
  {
    value: 3,
    label: '签收完成',
  },
  {
    value: 4,
    label: '已关闭',
  },
];
/**
 * 搜索
 */
const search = async () => {
  status_list.value = searchValue.value.status;
  // 判断开始时间不能早于当前时间
  if (moment(searchValue.value.startAt).diff(moment().format('YYYY-MM-DD HH:mm:ss')) >= 0) {
    ElMessage.error('开始时间不能晚于当前日期');
  } else {
    // 判断是否两个时间都填写了
    if (searchValue.value.startAt !== '' && searchValue.value.endAt !== '') {
      // 判断开始时间不能晚于结束时间
      if (moment(searchValue.value.startAt).diff(moment(searchValue.value.endAt)) <= 0) {
        searchValue.value.page = 1;
        requestShopUser();
      } else {
        ElMessage.error('结束时间不能早于开始时间');
      }
    } else {
      // 表示两个时间填写了任意一个
      searchValue.value.page = 1;
      requestShopUser();
    }
  }
};
/**
 * 点击重置
 */
const reset = () => {
  searchValue.value = {
    shopId: shopId,
    orderSn: '',
    status: '',
    startAt: '',
    endAt: '',
    page: 1,
    rows: 10,
  };
  radio.value = '0';
  status_list.value = '';
  requestShopUser();
};

/**
 * 点击查看
 */
const look = async (item: any) => {
  drawer.value = true;
};
/**
 * 遮罩层数据
 */
const maskBtn1 = () => {
  deliverShow.value = false;
  mask.value = false;
  plateformShow.value = false;
  status_list.value = '';
  messagesShow.value = false;
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/plateform/Article/Content.css';
@import '@/assets/css/plateform/Shop/GoodsManage.css';
.table :deep(.el-table__cell) {
  text-align: center;
}
.table {
  overflow: hidden;
  padding: 0 10px;
  .table_function {
    margin-top: 20px;
  }
}

// 推送消息
.plateform,
.messages {
  width: 600px;
  height: 500px;
  position: absolute;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -300px;
  margin-top: -250px;
  z-index: 99;
  background: #fff;
}

.el-drawer {
  padding: 20px;
  .shop_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .shop {
      display: flex;
      align-items: center;
      .shop_logo {
        width: 60px;
        height: 60px;
        border: 0;
        border-radius: 50%;
      }
      .name {
        margin-left: 10px;
        color: #424242;
        font-size: 16px;
        font-weight: bold;
        .shop_id {
          font-size: 12px;
          font-weight: normal;
          color: #bcbcbc;
          margin-top: 5px;
        }
      }
    }
  }
  .nav1 {
    display: flex;
    height: 30px;
    align-items: center;
    margin-top: 20px;
    border-bottom: 0;
    .nav_li {
      width: 50%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 14px;
    }
    .current {
      border-bottom: 2px solid #5697f9;
    }
  }
  .platform {
    padding: 20px;
  }
  .area {
    display: flex;
    margin-top: 30px;
    align-items: center;
    .title {
      width: 150px;
      color: #bcbcbc;
      font-size: 12px;
    }
    .mes {
      font-size: 12px;
    }
  }
  .title_m_b {
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-top: 30px;
    margin-bottom: 20px;
    .box {
      width: 3px;
      height: 20px;
      background: #5697f9;
    }
  }
  .btn_center {
    width: 200px;
    margin: 40px auto;
  }
}
.messages {
  height: 400px;
  margin-top: -200px;
}
.el-form-item :deep(.el-input-group__prepend) {
  width: 10px;
  background-color: #116cf8;
  color: #fff;
}
.el-form-item :deep(.el-upload--picture-card) {
  height: 100px;
  width: 100px;
  opacity: 0;
}
.btn {
  width: 150px;
  position: absolute;
  right: 20px;
  bottom: 40px;
}

:deep(.el-input__wrapper) {
  width: 150px;
}
:deep(.el-drawer.rtl) {
  background: #fff;
  width: 750px !important;
}
:deep(.el-overlay) {
  z-index: 40 !important;
  padding: static;
}

:deep(.is-process) {
  color: #409eff;
}
:deep(.is-process .el-step__icon.is-text) {
  border: 2px solid #409eff;
  background: #409eff;
  color: #fff;
}
:deep(.is-finish .el-step__line) {
  background: #409eff;
}

:deep(.el-select) {
  width: 100%;
}
.el-table .warning-row {
  background: #44a2ff !important;
}
</style>
